import VNode from '../utils/vnode';

const inputStyles = {
  width: '80%',
  margin: '20px auto',
  padding: '15px 10px',
  display: 'block',
  border: 'none',
  borderRadius: '6px',
  outline: 'none',
  fontSize: '12px',
  background: '#e8f0fe'
}

export default new VNode({
  attrs: {
    class: 'login-body'
  },
  styles: {
    padding: '10px'
  },
  children: [
    new VNode({
      type: 'input',
      attrs: {
        placeholder: '请输入账号 (admin)',
        class: 'login-body-account-input'
      },
      styles: inputStyles,
      events: {
        input({ target }) {
          this.$store.state.account = target.value;
        }
      }
    }),
    new VNode({
      type: 'input',
      attrs: {
        placeholder: '请输入密码 (admin)',
        type: 'password',
        class: 'login-body-password-input'
      },
      styles: inputStyles,
      events: {
        input({ target }) {
          this.$store.state.password = target.value;
        }
      }
    }),
    new VNode({
      content: '立即登录',
      styles: {
        width: '100px',
        margin: '50px auto 20px auto',
        textAlign: 'center',
        background: '#409eff',
        color: '#fff',
        cursor: 'pointer',
        fontSize: '14px',
        padding: '8px',
        borderRadius: '4px',
        boxShadow: '2px 2px 5px grey',
      },
      events: {
        click({ $config: { success, fail } }) {
          const { state: { account, password } } = this.$store;
          if (account !== 'admin' || password !== 'admin') {
            try {
              fail('账号密码错误'); // 登录失败回调
            } catch (error) {
              console.error(error);
            }
          } else {
            try {
              success({ account, password }); // 登录成功回调
            } catch (error) {
              console.error(error);
            }
          }
        }
      }
    }),
  ]
});